<template>
	<div class="rightcontainer">
		<div class="rightmain">
			<div class="title">我的考试</div>
			<div class="searchdiv">
				<span>关键字：</span>
				<el-input v-model="keyword" placeholder="输入关键词进行查询" style="width:200px;margin:0 10px;"></el-input>
				<el-button  type="primary" class="infobtn" @click="tosearch">搜 索</el-button>
			</div>
			<div class="resdiv">
				您共有<span>{{examlist.length}}</span>条考试信息
			</div>
			<el-table border :data="examlist" stripe style="width: 100%" :header-cell-style="{backgroundColor: '#a4d0f4', color: '#134B9F', fontWeight: 'bold',height:'48px',}">
				<el-table-column label="序 号" type="index" align="center" width="60"></el-table-column>
				<el-table-column label="考试名称" prop="examinationName" align="left" header-align="center"></el-table-column>
				<el-table-column label="考试科目" prop="categoryName" align="left" header-align="center"></el-table-column>
				<el-table-column label="组织部门" prop="examTenant" align="left" header-align="center"></el-table-column>
				<el-table-column label="考试时间" prop="examinationTime" align="left" header-align="center"></el-table-column>
				<el-table-column label="考试状态	" prop="examStatus" align="left" header-align="center"></el-table-column>
				<el-table-column label="考试得分" prop="score" align="left" header-align="center"></el-table-column>
				<el-table-column label="操 作" align="left" header-align="center">
					<template slot-scope="scope">
						<el-button v-if="scope.row.examStatus=='考试中'" size="mini" type="success" class="infobtn2" @click="goPaper(scope.row)">进入考试</el-button>
						<el-button v-else-if="scope.row.examStatus=='成绩查询'" size="mini" type="primary" class="infobtn2" @click="showres(scope.row)">查看成绩</el-button>
						<el-button v-else size="mini" type="primary" class="infobtn" @click="goPaper(scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				examlist: [{
					id:1
				}]
			};
		},
		computed: {},
		mounted() {
			this.getexamlist()
		},
		methods: {
			goPaper(item) {
				this.$router.push({ name: 'Prepare',query:{examId:item.examId,registId:item.registId,recordId:item.recordId} })
			},
			showres(item) {
				this.$router.push({ name: 'Examres',query:{examId:item.examId,registId:item.registId,recordId:item.recordId} })
			},
			tosearch(){
				this.getexamlist()
			},
			async getexamlist() {
				var res = await this.$api.Usercenter.Getmyexam({ page: 1, pageSize: 100,keyword:this.keyword })
				this.examlist = res.data.items
			},
			tojoin(id) {
				this.$router.push({ name: 'Chengnuo', query: { id } })
			},
			toaudit(id) {
				this.$router.push({ name: 'Joinfo', query: { id } })
			},
		},
	};
</script>

<style lang="less" scoped>
	.rightcontainer {
		width: 920px;
		margin: 0 auto 40px;
		overflow: hidden;

		.rightmain {
			width: 100%;
			margin: 20px 0;

			.title {
				color: #134B9F;
				font-size: 20px;
				line-height: 18px;
				font-weight: bold;
				padding-bottom: 9px;
				border-bottom: 2px solid #134B9F;
				display: inline-block;
				letter-spacing: 2px;
			}
			.searchdiv{
				width:100%;
				height:60px;
				display:flex;
				flex-direction: row;
				align-items:center;
				justify-content: flex-end;
			}
			.resdiv{
				color:#ccc;
				font-size:15px;
				line-height:40px;
				height:40px;
				padding-left:5px;
				border-top:2px solid #dcdcdc;
				span{
					color:#f00;
					margin:0 3px;
				}
			}
			.infobtn{
				background-color:#134B9F;
				border:none;
			}
			.infobtn2{
				background-color:#67c23a;
				border:none;
			}
		}
	}
</style>
